import { FormattedMessage, formatMessage } from 'umi';
import PasswordSetting from './PasswordSetting'
import React, { Component } from 'react';
import { List } from 'antd';
import { useState } from 'react';
const passwordStrength = {
  strong: (
    <span className="strong">
      <FormattedMessage id="accountandsettings.security.strong" defaultMessage="Strong" />
    </span>
  ),
  medium: (
    <span className="medium">
      <FormattedMessage id="accountandsettings.security.medium" defaultMessage="Medium" />
    </span>
  ),
  weak: (
    <span className="weak">
      <FormattedMessage id="accountandsettings.security.weak" defaultMessage="Weak" />
    </span>
  ),
};

const SecurityView = (props) => {

  const [passwordModifyModalDisplay,setPasswordModifyModalDisplay] = useState(false)

  const onClickModifyPassword = () => {
    setPasswordModifyModalDisplay(true);
  }

  const onCancelModifyPassword = () => {
    setPasswordModifyModalDisplay(false);
  }

  const getData = () => [
    {
      title: formatMessage(
        {
          id: 'accountandsettings.security.password',
        },
        {},
      ),
      // description: (
      //   <>
      //     {formatMessage({
      //       id: 'accountandsettings.security.password-description',
      //     })}
      //     {passwordStrength.strong}
      //   </>
      // ),
      actions: [
        <a key="Modify" onClick={onClickModifyPassword}>
          <FormattedMessage id="accountandsettings.security.modify" defaultMessage="Modify" />
        </a>,
      ],
    },
    {
      title: formatMessage(
        {
          id: 'accountandsettings.security.phone',
        },
        {},
      ),
      description: `${formatMessage(
        {
          id: 'accountandsettings.security.phone-description',
        },
        {},
      )}138****8293`,
      actions: [
        <a key="Modify">
          <FormattedMessage id="accountandsettings.security.modify" defaultMessage="Modify" />
        </a>,
      ],
    },
    {
      title: formatMessage(
        {
          id: 'accountandsettings.security.question',
        },
        {},
      ),
      description: formatMessage(
        {
          id: 'accountandsettings.security.question-description',
        },
        {},
      ),
      actions: [
        <a key="Set">
          <FormattedMessage id="accountandsettings.security.set" defaultMessage="Set" />
        </a>,
      ],
    },
    {
      title: formatMessage(
        {
          id: 'accountandsettings.security.email',
        },
        {},
      ),
      description: `${formatMessage(
        {
          id: 'accountandsettings.security.email-description',
        },
        {},
      )}：ant***sign.com`,
      actions: [
        <a key="Modify">
          <FormattedMessage id="accountandsettings.security.modify" defaultMessage="Modify" />
        </a>,
      ],
    },
    // {
    //   title: formatMessage(
    //     {
    //       id: 'accountandsettings.security.mfa',
    //     },
    //     {},
    //   ),
    //   description: formatMessage(
    //     {
    //       id: 'accountandsettings.security.mfa-description',
    //     },
    //     {},
    //   ),
    //   actions: [
    //     <a key="bind">
    //       <FormattedMessage id="accountandsettings.security.bind" defaultMessage="Bind" />
    //     </a>,
    //   ],
    // },
  ];

    return (
      <>
        <List
          itemLayout="horizontal"
          dataSource={getData()}
          renderItem={(item) => (
            <List.Item actions={item.actions}>
              <List.Item.Meta title={item.title} description={item.description} />
            </List.Item>
          )}
        />
        <PasswordSetting  visible={passwordModifyModalDisplay} onCancel={onCancelModifyPassword}></PasswordSetting>
      </>
    );
}

export default SecurityView;
